<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 <title>友情链接</title>
<%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
<link rel="stylesheet" href="<%=basePath%>css/global.css" media="all" />
<link rel="stylesheet" href="<%=basePath%>plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=basePath%>css/system.css" media="all">
<link rel="stylesheet" href="<%=basePath%>css/tab.css" media="all" />
</head>
<body>
<div class="admin-tab admin-user">
    <div class="tab-condition">
        <form class="layui-form clefix" onsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
		    <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w">
		   <!-- <a href="https://www.baidu.com/" target="_blank">
		        <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="Baidu" align="bottom" border="0">
		    </a>   -->
		     <div class="layui-form-item">
                <div class="layui-input-block">
		    <input type="text"  class="layui-input" onfocus="checkHttps" name="word"  size="30">
		    </div>
		    </div>
		     <div class="layui-form-item">
		      <button class="layui-btn TM-btn-search" lay-submit="" lay-filter="demo2"><i class="layui-icon layui-unselect layui-tab-close">&#xe615;</i>搜索</button>
		      <a class="layui-btn refreshbtn" href="javascript:;">刷新</a>
		      </div>
		</form>
		<script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
		<script>
		    function checkHttps () {
		        BaiduHttps.useHttps();    
		    };
		    function baiduWithHttps (formname) {
		        var data = BaiduHttps.useHttps();
		        if (data.s === 0) {
		            return true;
		        }
		        else {
		            formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
		            return true;
		        }
		    };
		</script> 
    </div>
    <div class="layui-field-box TM-url-box">
        <!-- <div class="links-city">
            <h4 class="links-title links-district"><label>地区 : </label> <span>不限</span><span>华东</span><span>华南</span><span>华中</span><span>华北</span><span>西北</span> <span>西南</span> <span>东北</span> <span>其他</span> </h4>
            <ul class="links-province">
                <li class="active"><span>111</span></li>
                <li><span>111</span><span>222</span></li>
                <li><span>111</span><span>222</span><span>333</span></li>
                <li><span>111</span><span>222</span><span>333</span><span>444</span></li>
            </ul>
        </div> -->
        <form action="">
	        <h4 class="links-title links-province">
	        	<label>地区 :</label>
	        	<span class="active" data="0">全部</span>
	        	<c:forEach var="obj" items="${prolist}">
	        		<span data="${obj.id}">${obj.provincename}</span>
	        	</c:forEach>
	        </h4>
	        <h4 class="links-title links-sorts">
	        	<label>类别 :</label>
	        	<span class="active" data="-1">全部</span><!-- <span data="0">文章</span> --><span data="1">链接</span><span data="2">文件</span>
	        </h4>
	        <input type="hidden" id="proid" name="proid" value="${proid}">
	        <input type="hidden" id="type" name="type" value="${type}">
        </form>

        <ul class="TM-links-url">
        	<li class="active lihtml">
        		<c:forEach var="obj" items="${list}">
        			<c:if test="${obj.type == 0}"></c:if>
        			<c:if test="${obj.type == 1 }"><a href="${obj.content}" target="_blank"><i class="TM-icon icon-logo"></i>${obj.title}</a></c:if>
        			<c:if test="${obj.type == 2 }"><a href="/file/${obj.content}"><i class="TM-icon icon-logo"></i>${obj.title}</a></c:if>
        		</c:forEach>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: 'plugins/layui/modules/'
    });
    layui.use(['laypage','form','layer',], function() {
        var $ = layui.jquery;
        
        //加载层关闭标记
        var loadindex;
        //很显然,要选择的条件有地区,类别,那就只能用ajax动态加载了呗...
        //省份选择
        $('.links-province').on('click','span',function(){
        	var proid = $(this).attr("data");
        	$("#proid").val(proid);
        	var type = $("#type").val();
        	$(this).addClass('active').siblings().removeClass('active');
        	var html = addResultHtml(proid, type);
        	//把得到的html放到页面
        	$(".lihtml").html(html);
			layer.close(loadindex);
        });
        
        
        //类别选择
        $(".links-sorts").on('click','span',function(){
        	var type = $(this).attr("data");
        	$("#type").val(type);
        	var proid = $("#proid").val();
        	$(this).addClass('active').siblings().removeClass('active');
        	var html = addResultHtml(proid, type);
        	$(".lihtml").html(html);
        	layer.close(loadindex);
        });
        
        
		function addResultHtml(proid,type) {
			var html = "";
			loadindex = layer.load();
			$.ajax({
				type : "post",
				data : {proid : proid,type : type},
				url : "/linkpagehtml",
				dataType : "json",
				async: false,
				success : function(data){
					if (data != null) {
						$.each(data,function(index, content){
							if (content['type'] == 1) {
								html += '<a target="_blank" href="'+content['content']+'"><i class="TM-icon icon-logo"></i>'+content['title']+'</a>';
							} else if (content['type'] == 2) {
								html += '<a href="/file/'+content['content']+'"><i class="TM-icon icon-logo"></i>'+content['title']+'</a>';
							} else {
								html += '';
							}
						});
					} else {
						html += "";
					}
				}
			});
			return html;
		}        
        
        
        
        
        
        //城市选择
        /* $('.links-district').on('click','span',function(){
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.links-province li').eq(index-1).addClass('active').siblings().removeClass('active');
        }); */
        //字体颜色改变
        /* $('.links-province li').on('click','span',function(){
            $(this).addClass('active').siblings().removeClass('active');
        }); */

        //类型选择
        /* $('.links-sorts').on('click','span',function(){
            var idx = $('.links-sorts span').index($(this));
            $(this).addClass('active').siblings().removeClass('active');
            $('.TM-links-url li').eq(idx).addClass('active').siblings().removeClass('active');
        });*/



    });
</script>
</body>
</html>